<template>
	<view>
		<view class="un-tou" >
			<text class="un-text1" >我的卡</text>
			<!-- <text class="un-text2">共{{cardlist.length}}张</text> -->
			<text class="un-guanli" @click="setEdit" v-if="!this.edit && cardlist.length!==0">管理</text>
			<text class="un-guanli" @click="setEdit" v-if="this.edit && cardlist.length!==0">完成</text>
		</view>
		<view class="un-card" v-for="(item,index) in cardlist " :key="index">
			<view class="un-cart-item">

				<view class="un-cart-item1" >
					<view >
						<text class="clamp un-text1">{{item.BANKNAME}}</text>
						<text class="clamp un-text2">{{item.CARDTYPE}}</text>
						<text class="clamp un-text3">**** **** **** {{item.CARDNO}}</text>
					</view>
					<view >
						<!-- <text class="clamp un-text4" v-if="item.ISDEFAULT===1">默认付款</text> -->
						<!-- <text class="clamp un-text5" v-if="item.ISDEFAULT===0 && edit" @tap="setIsDefault(item)">设为默认</text> -->
						<text class="clamp un-text6" v-if="edit" @click="dele(item)">删除</text>
					</view>
					
				</view>
			</view>
			
		</view>
		<view v-if="cardlist.length===0" class="un-tian" @click="navToaddbankcard">
			<text class="yticon icon-jia1"></text>
			<text>添加银行卡</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				edit:false,
				cardlist:[]
			}
		},
		onLoad(){
			this.loadData();
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onShow() {
			this.edit=false,
			this.loadData();
			
		},
		methods: {
			async loadData(){
				this.$http.post("/user/info",{
				     SIGNATURE : uni.getStorageSync("SIGNATURE"),
				     TOKEN: uni.getStorageSync('userInfo').TOKEN,
				}).then(res=>{
				    if(res.data.STATE == '903'||res.data.STATE == '904'){
				      uni.navigateTo({
				       url:'/pages/public/login1'
				      })
				     }
					if (res.statusCode === 200 && res.data.STATE === '0') {
						console.log("LLLLLLLLLLLLLLLLLLLLLLL",res.data.OBJECT.LOVECATE==null);
						if (res.data.OBJECT.CUSTNAME == null && res.data.OBJECT.cardIdNo == null){
							uni.showModal({
								title:'请先完善信息，实名认证',
								success:function(e){
									uni.redirectTo({
										url:'/pages/usercenter/usercenter'
									})
								}
							})
						}
					}else{
					 	uni.showToast({title:res.data.MSG, icon:"none"});
					}
				 }).catch(err =>{
				     console.log('request fail', err);
				 });
				//加载银行卡信息
				this.$http.post("/user/queryCard",{
					SIGNATURE : uni.getStorageSync("SIGNATURE"),
					TOKEN: uni.getStorageSync('userInfo').TOKEN,
				}).then((e)=>{
						
					let list = e.data.OBJECT;
					if(list !== "" ){
						this.cardlist = list.map(item=>{
							// 遍历
							item.CARDNO = item.CARDNO.substr(item.CARDNO.length-4,4);
							item.CARDTYPE = item.CARDTYPE === '1' ?  '借记卡' : '贷记卡';
							return item;
						})
					}else{
						this.cardlist = []
						
					}
				}).catch((err)=>{
					console.log("请求超时",err);
				})
			},
			setEdit(){
				this.edit=!this.edit;
			},
			dele(item){
				this.$http.post("/user/delCard",{
					SIGNATURE : uni.getStorageSync("SIGNATURE"),
					TOKEN: uni.getStorageSync('userInfo').TOKEN,
					CARDID: item.ID,
					ISDEFAULT: item.ISDEFAULT,
				}).then((e)=>{
					if(e.data.STATE == '903'||e.data.STATE == '904'){
						// #ifdef MP-WEIXIN
						uni.showModal({
							content:'请先登录',
							success: function (res) {
							        if (res.confirm) {
							            uni.switchTab({
							            	url:"/pages/user/user"
							            })
							        } else if (res.cancel) {
							            console.log('用户点击取消');
							        }
							    }
						})
						// #endif
						// #ifndef MP-WEIXIN
						uni.navigateTo({
							url: "/pages/public/login1"
						})
						// #endif
					}
					if (e.statusCode === 200 && e.data.STATE === '0') {  
						console.log("**************",e)
					}else{
						uni.showToast({title:e.data.MSG, icon:"none"});
					}
					this.loadData();
				}).catch((err)=>{
					console.log("请求超时",err);
				})
			},
			setIsDefault(item){
				this.$http.post("/user/updateCard",{
					SIGNATURE : uni.getStorageSync("SIGNATURE"),
					TOKEN: uni.getStorageSync('userInfo').TOKEN,
					CARDID: item.ID,
					
				}).then((e)=>{
					if(e.data.STATE == '903'||e.data.STATE == '904'){
						// #ifdef MP-WEIXIN
						uni.showModal({
							content:'请先登录',
							success: function (res) {
							        if (res.confirm) {
							            uni.switchTab({
							            	url:"/pages/user/user"
							            })
							        } else if (res.cancel) {
							            console.log('用户点击取消');
							        }
							    }
						})
						// #endif
						// #ifndef MP-WEIXIN
						uni.navigateTo({
							url: "/pages/public/login1"
						})
						// #endif
					}
					if (e.statusCode === 200 && e.data.STATE === '0') {  
						console.log("**************",e)
					}else{
						uni.showToast({title:e.data.MSG, icon:"none"});
					}
					this.loadData();
				}).catch((err)=>{
					console.log("请求超时",err);
				})
				// this.cardlist.map(card=>
				// 	card.ISDEFAULT=0
				// )
				// item.ISDEFAULT=1
			},
			navToaddbankcard(){
				this.$http.post("/user/info",{
     SIGNATURE : uni.getStorageSync("SIGNATURE"),
     TOKEN: uni.getStorageSync('userInfo').TOKEN,
    }).then(res=>{
     if(res.data.STATE == '903'||res.data.STATE == '904'){
      // #ifdef MP-WEIXIN
      uni.showModal({
      	content:'请先登录',
      	success: function (res) {
      	        if (res.confirm) {
      	            uni.switchTab({
      	            	url:"/pages/user/user"
      	            })
      	        } else if (res.cancel) {
      	            console.log('用户点击取消');
      	        }
      	    }
      })
      // #endif
      // #ifndef MP-WEIXIN
      uni.navigateTo({
      	url: "/pages/public/login1"
      })
      // #endif
     }
    }).catch(err =>{
     console.log('request fail', err);
    })
				uni.navigateTo({
					url:`/pages/bankcard/addbankcard/addbankcard`
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		padding: 0upx 70upx;
	}
	.un-tou{
		.un-text1{
			font-weight: 600;
			font-size: 32upx;
		}
		.un-text2{
			font-size: 25upx;
			color: #999999;
		}
		.un-guanli{
			float: right;
			font-size: 30upx;
		}
	}
	
	.un-cart-item{
		background-color: #FFA847;
		width: 100%;
		height: 200upx;
		border-radius: 2%;
		display: flex;
		align-items: center;
		margin: 20upx 0upx;
		padding-left: 50upx;
		position: relative;
		.un-cart-item1{
			color: #FFFFFF;
			display: flex;
			.un-text1{
				
			}
			.un-text2{
				font-size: 24upx;
				line-height: 50upx;
			}
			.un-text3{
				font-size: 35upx;
			}
			.un-text4{
				color:#FFA847 ;
				margin-left: 100upx;
				font-size: 30upx;
			}
			.un-text5{
				 color:#666666 ;
				 margin-left: 100upx;
				 font-size: 30upx;
			}
			.un-text6{
				position: absolute;
				z-index: 1;
				left: 520upx;
				top:70upx;
				color:#FF0000 ;
				font-size: 30upx;
			}
		}
		
	}
	
	.un-tian{
		margin-top: 30upx;
		font-size: 32upx;
	}
	
</style>
